<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片处理-fabric·滤镜</title>
    <link rel="shortcut icon" href="../favicon.ico" />
    <link rel="stylesheet" href="../support/style.css">
    <link rel="stylesheet" href="dev/tesBasic.css">
    <script src="../support/fabric.js"></script>
</head>

<body class="gray1">
    <div class="abs gray3" id="menu-basic">
        <input type="button" id="close-basic" value="关闭">
        <div class="cb"></div>
        <p class="fr">.sepia
            <input type="checkbox" disabled id="sepia"></p>
        <p class="fr">.b/.w
            <input type="checkbox" disabled id="blackwhite"></p>
        <p class="fr">.brownie
            <input type="checkbox" disabled id="brownie"></p>
        <p class="fr">.vintage
            <input type="checkbox" disabled id="vintage"></p>
        <p class="fr">.techni
            <input type="checkbox" disabled id="technicolor"></p>
        <p class="fr">.polaroid
            <input type="checkbox" disabled id="polaroid"></p>
        <p class="fr">.koda
            <input type="checkbox" disabled id="kodachrome"></p>
        <p class="fr">.invert
            <input type="checkbox" disabled id="invert"></p>
        <p class="fr">.grayscale
            <input type="checkbox" disabled id="grayscale"></p>
        <p class="fr">.avg
            <input type="radio" disabled id="average" name="grayscale"></p>
        <p class="fr">.lum
            <input type="radio" disabled id="luminosity" name="grayscale"></p>
        <p class="fr">.light
            <input type="radio" disabled id="lightness" name="grayscale"></p>
    </div>
    <div class="wrap">
        <div class="white1 ib" id="canvas4"></div>
        <div class="cb"></div>
        <p class="fl">.br
            <input type="checkbox" disabled id="brightness">
            <input type="range" disabled id="bn-v" value="0" min="-1" max="1" step="0.0039">
        </p>
        <div class="fl r20"></div>
        <p class="fl">.con
            <input type="checkbox" disabled id="contrast">
            <input type="range" disabled id="cs-v" value="0" min="-1" max="1" step="0.0039">
        </p>
        <div class="cb"></div>
        <p class="fl">.hue
            <input type="checkbox" disabled id="hue">
            <input type="range" disabled id="hue-v" value="0" min="0" max="2" step="0.05">
        </p>
        <div class="fl r20"></div>
        <p class="fl">.sat
            <input type="checkbox" disabled id="saturation">
            <input type="range" disabled id="st-v" value="0" min="-1" max="1" step="0.0039">
        </p>
        <div class="cb"></div>
        <p class="fl">.gamma
            <input type="checkbox" disabled id="gamma">
            <input type="range" disabled id="gm-red" value="1" min="0.2" max="2.2" step="0.0039">
            <input type="range" disabled id="gm-green" value="1" min="0.2" max="2.2" step="0.0039">
            <input type="range" disabled id="gm-blue" value="1" min="0.2" max="2.2" step="0.0039">
        </p>
        <div class="cb"></div>
        <p class="fl">.noise
            <input type="checkbox" disabled id="noise">
            <input type="range" disabled id="ns-v" value="100" min="0" max="1000">
        </p>
        <div class="fl r20"></div>
        <p class="fl">.pixel
            <input type="checkbox" disabled id="pixelate">
            <input type="range" disabled id="px-v" value="4" min="2" max="20">
        </p>
        <div class="cb"></div>
        <p class="fl">.blur
            <input type="checkbox" disabled id="blur">
            <input type="range" disabled id="br-v" value="0.3" min="0" max="1" step="0.01">
        </p>
        <div class="fl r20"></div>
        <p class="fl">.sharpen
            <input type="checkbox" disabled id="sharpen"></p>
        <p class="fl">.emboss
            <input type="checkbox" disabled id="emboss"></p>
        <div class="cb"></div>
        <p class="fl">.img-blend
            <input type="checkbox" disabled id="image-blend"></p>
        <p class="fl">.img-mask
            <input type="checkbox" disabled id="image-mask"></p>
        <input type="button" id="open-basic" value="打开基本">
        <div class="cb"></div>
        <p class="fl">.color-blend
            <input type="checkbox" disabled id="color-blend">
            <input type="color" disabled id="blend-color" value="#00f900">
            <input type="range" disabled id="blend-alpha" value="1" min="0" max="1" step="0.01">
            .mode
            <select id="blend-mode">
                <option value="add" selected="">Add</option>
                <option value="screen">Screen</option>
                <option value="lighten">Lighten</option>
                <option value="multiply">Multiply</option>
                <option value="darken">Darken</option>
                <option value="overlay">Overlay</option>
                <option value="tint">Tint</option>
                <option value="exclusion">Exclusion</option>
                <option value="diff">Diff</option>
                <option value="subtract">Subtract</option>
            </select>
        </p>
        <div class="cb"></div>
        <p class="fl">.remove
            <input type="checkbox" disabled id="remove-color">
            <input type="color" disabled id="r-c-c" value="#50a0ff">
            <input type="range" disabled id="r-c-d" value="0.4" min="0" max="1" step="0.01">
        </p>
        <hr class="cb">
        <div class="white2 ib">
            <canvas width="400" height="300" id="canvas2"></canvas>
            <img class="non" id="img1" src="https://huyuyanpic.cdn.bcebos.com/人物1.png">
        </div>
        <input type="radio">
        <div class="white1 ib">
            <canvas width="400" height="300" id="canvas1"></canvas>
        </div>
        <input type="radio">
        <div class="white2 ib">
            <canvas width="400" height="300" id="canvas3"></canvas>
        </div>
        <input type="radio">
    </div>
    <h3 class="ct">
        <a class="red" href="../lab.html">back</a>
    </h3>
    <!-- 脚本 -->
    <script src="dev/tesBasic.js"></script>
    <script src="dev/filters.js"></script>
</body>

</html>